<template>
  <el-dialog
    append-to-body
    :title="info+'-优惠券'"
    :visible.sync="dialogVisible"
    align="left"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="1200px">
    <el-form ref="form" :model="form" label-width="200px" :rules="rules">
      <el-form-item label="优惠券-满足金额:" align="left" prop="fullMoney">
        <el-input-number :controls="false" v-model="form.fullMoney" min="0" max="99999" placeholder="优惠券-满足金额"  style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="优惠券-减免金额:" align="left" prop="reduceMoney">
        <el-input-number :controls="false" v-model.number="form.reduceMoney" min="1" max="99999" :step="0.01" placeholder="优惠券-减免金额"  style="width: 200px"></el-input-number>
      </el-form-item>
      <el-form-item label="开始领取日期:" align="left" prop="getDay">
        <el-date-picker
          v-model="form.getDay"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="有效期:" align="left" prop="endDay">
        <el-date-picker
          v-model="form.endDay"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="所属分类:" align="left">
        <div v-if="productClassifyList.length>0">
          <el-select v-model="form.productClassifyId" placeholder="选择分类" clearable>
            <el-option
              v-for="item in productClassifyList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'CreateCouponDialog',
  components: {},
  props:{
    successFunction:Function
  },
  data: function () {
    return {
      info:'创建',
      productClassifyList:[],
      dialogVisible: false,
      currLoading: false,
      form: {
        fullMoney: 0,
        reduceMoney: 0,
        getDay:'',
        endDay:'',
        productClassifyId:''
      },
      rules: {
        fullMoney: [
          {required: true, message: '请输入 满足金额', trigger: ['blur', 'change']},
        ],
        reduceMoney: [
          {required: true, message: '请输入 减免金额', trigger: ['blur', 'change']},
        ],
        getDay: [
          {required: true, message: '请选择 开始领取日期', trigger: ['blur', 'change']},
        ],
        endDay: [
          {required: true, message: '请选择 有效日期', trigger: ['blur', 'change']},
        ],
      }
    }
  },
  mounted () {
    this.searchProductClassify()
  },
  methods: {
    // 搜索商品分类
    searchProductClassify:function () {
      let $this=this
      $this.currLoading = true
      $this.form.productClassifyId=''
      $this.productClassifyList=[]
      $this.MyRequest(this.ApiDoNameShop + 'Product/getAllProductClassify', {}, function (list) {
        $this.currLoading = false
        var arr=[]
        list.forEach(function (value, index) {
          arr.push({
            id:value.id,
            name:value.name
          })
        })
        $this.productClassifyList=arr
        $this.$forceUpdate()
      }, function () {
        $this.$message.success('操作失败，请重试')
        $this.currLoading = false
        $this.$forceUpdate()
      })
    },
    open: function (infoData) {
      this.info='创建'
      if (infoData.id) {
        this.info='更新'
        this.form.fullMoney = infoData.fullMoney
        this.form.reduceMoney = infoData.reduceMoney
        this.form.getDay = infoData.getDay
        this.form.endDay = infoData.endDay
        this.form.productClassifyId = infoData.productClassifyId
        if (!this.form.productClassifyId){
          this.form.productClassifyId=''
        }
      }else{
        this.form={
          fullMoney: 0,
          reduceMoney: 0,
          getDay:'',
          endDay:'',
          productClassifyId:'',
        }
        if (this.$refs.form){
          this.$refs.form.resetFields()
        }
      }
      this.dialogVisible = true
      this.$forceUpdate()
    },
    submit: function () {
      let $this = this
      $this.$refs.form.validate((valid) => {
        if (valid) {
          if ($this.form.reduceMoney<=0){
            return $this.$message.error('减免金额 必须大于0')
          }
          if ($this.form.fullMoney<=0){
            return $this.$message.error('满足金额 必须大于0')
          }
          if ($this.form.reduceMoney>$this.form.fullMoney){
            return $this.$message.error("【满足金额】不能大于【减免金额】")
          }
          if (!$this.form.productClassifyId){
            $this.form.productClassifyId=0
          }
          var form=Object.assign({},$this.form)
          $this.currLoading = true
          $this.MyRequest(this.ApiDoNameShop + 'Coupon/create', form, function () {
            $this.$message.success($this.info+'成功')
            $this.currLoading = false
            $this.form = {
              fullMoney: 0,
              reduceMoney: 0,
              getDay: '',
              endDay: '',
              productClassifyId: '',
            }
            $this.dialogVisible=false
            $this.$props.successFunction()
            $this.$forceUpdate()
          }, function () {
            $this.$message.success('操作失败，请重试')
            $this.currLoading = false
            $this.$forceUpdate()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
